<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>轮胎详情 - <span th:text="${tire.tireNumber}"></span></title>
  <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .card {
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
      margin-bottom: 1.5rem;
    }
    .info-label {
      font-weight: 600;
      color: #495057;
    }
    .record-pre {
      white-space: pre-wrap;
      background-color: #f8f9fa;
      padding: 1rem;
      border-radius: 0.375rem;
      font-size: 0.9rem;
    }
    .cost-badge {
      font-size: 0.9rem;
    }
    .usage-stats {
      background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
      color: white;
    }

    /* 照片相关样式 */
    .photo-section {
      margin-top: 1.5rem;
    }
    .photo-card {
      height: 100%;
    }
    .photo-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    .photo-item {
      position: relative;
      width: 120px;
      height: 120px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #dee2e6;
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .photo-item:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .photo-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .no-photos {
      text-align: center;
      padding: 2rem;
      color: #6c757d;
    }
    .photo-modal .modal-dialog {
      max-width: 90%;
    }
    .photo-modal img {
      width: 100%;
      height: auto;
      max-height: 80vh;
      object-fit: contain;
    }
    .carousel-control-prev, .carousel-control-next {
      width: 5%;
      background-color: rgba(0,0,0,0.3);
    }
    .photo-count-badge {
      position: absolute;
      top: 5px;
      right: 5px;
      background: rgba(0,0,0,0.7);
      color: white;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
    .axle-badge {
      background-color: #6c757d;
      color: white;
      font-size: 0.8rem;
    }
    .photo-description {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0,0,0,0.7);
      color: white;
      padding: 2px 5px;
      font-size: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .photo-type-badge {
      position: absolute;
      top: 5px;
      left: 5px;
      background: rgba(0,0,0,0.7);
      color: white;
      border-radius: 4px;
      padding: 1px 4px;
      font-size: 9px;
    }
  </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="/api/tires">轮胎管理系统</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="/api/tires">轮胎列表</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/api/tires/add">添加轮胎</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/api/tires/usage">查询使用记录</a>
        </li>
      </ul>
      <span class="navbar-text">
        轮胎号: <strong th:text="${tire.tireNumber}"></strong>
      </span>
    </div>
  </div>
</nav>

<div class="container mt-4">
  <!-- 面包屑导航 -->
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/api/tires">轮胎列表</a></li>
      <li class="breadcrumb-item active" th:text="${tire.tireNumber}">轮胎详情</li>
    </ol>
  </nav>

  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1>轮胎详情</h1>
    <div>
      <a th:href="@{/api/tires/usage?tireNumber={tireNumber}(tireNumber=${tire.tireNumber})}"
         class="btn btn-info">查询使用记录</a>
      <a href="/api/tires" class="btn btn-secondary">返回列表</a>
    </div>
  </div>

  <!-- 使用统计卡片 -->
  <div class="row">
    <div class="col-md-12">
      <div class="card usage-stats">
        <div class="card-body">
          <div class="row text-center">
            <div class="col-md-3">
              <h5>使用公里数</h5>
              <h2 th:if="${tire.usedMileage != null}" th:text="${tire.usedMileage} + ' 公里'"></h2>
              <h2 th:if="${tire.usedMileage == null}" class="text-warning">使用中</h2>
            </div>
            <div class="col-md-3">
              <h5>使用时间</h5>
              <h2 th:if="${tire.usedDays != null}" th:text="${tire.usedDays} + ' 天'"></h2>
              <h2 th:if="${tire.usedDays == null}" class="text-warning">使用中</h2>
            </div>
            <div class="col-md-3">
              <h5>状态</h5>
              <h2>
                <span th:if="${tire.scrapDate == null}" class="badge bg-success">使用中</span>
                <span th:if="${tire.scrapDate != null}" class="badge bg-secondary">已报废</span>
              </h2>
            </div>
            <div class="col-md-3">
              <h5>总费用</h5>
              <!-- 修复总费用计算 - 添加swapCost -->
              <h2 th:text="'￥' + ${#numbers.formatDecimal(
                (tire.tirePrice != null ? tire.tirePrice : 0) +
                (tire.installCost != null ? tire.installCost : 0) +
                (tire.repairCost != null ? tire.repairCost : 0) +
                (tire.swapCost != null ? tire.swapCost : 0), 1, 2)}"></h2>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <!-- 基本信息 -->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">基本信息</h5>
        </div>
        <div class="card-body">
          <div class="row mb-2">
            <div class="col-sm-4 info-label">轮胎号:</div>
            <div class="col-sm-8" th:text="${tire.tireNumber}"></div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">品牌:</div>
            <div class="col-sm-8" th:text="${tire.tireBrand} ?: '--'"></div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">型号:</div>
            <div class="col-sm-8" th:text="${tire.tireModel} ?: '--'"></div>
          </div>
          <!-- 添加轴号和位置信息 -->
          <div class="row mb-2">
            <div class="col-sm-4 info-label">轴号/位置:</div>
            <div class="col-sm-8">
              <span th:if="${tire.axleNumber != null}" class="badge axle-badge" th:text="${tire.axleNumber} + '轴'"></span>
              <span th:if="${tire.tirePosition != null}" th:text="' ' + ${tire.tirePosition}"></span>
              <span th:if="${tire.axleNumber == null and tire.tirePosition == null}" class="text-muted">--</span>
            </div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">车头牌号:</div>
            <div class="col-sm-8" th:text="${tire.vehiclePlateNumber} ?: '--'"></div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">挂车牌号:</div>
            <div class="col-sm-8" th:text="${tire.trailerPlateNumber} ?: '--'"></div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">当前关联车牌:</div>
            <div class="col-sm-8" th:text="${tire.currentPlateNumber} ?: '未安装'"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 安装与报废信息 -->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">安装与报废信息</h5>
        </div>
        <div class="card-body">
          <div class="row mb-2">
            <div class="col-sm-4 info-label">装胎日期:</div>
            <div class="col-sm-8" th:text="${tire.installDate} ?: '--'"></div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">装胎公里数:</div>
            <div class="col-sm-8" th:text="${tire.installMileage} ?: '--'"></div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">报废日期:</div>
            <div class="col-sm-8" th:text="${tire.scrapDate} ?: '--'"></div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">报废公里数:</div>
            <div class="col-sm-8" th:text="${tire.scrapMileage} ?: '--'"></div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">使用公里数:</div>
            <div class="col-sm-8" th:text="${tire.usedMileage} ?: '--'"></div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">使用天数:</div>
            <div class="col-sm-8" th:text="${tire.usedDays} ?: '--'"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <!-- 费用信息 -->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">费用信息</h5>
        </div>
        <div class="card-body">
          <div class="row mb-2">
            <div class="col-sm-4 info-label">轮胎单价:</div>
            <div class="col-sm-8">
              <span th:if="${tire.tirePrice != null}"
                    th:text="'￥' + ${#numbers.formatDecimal(tire.tirePrice, 1, 2)}"
                    class="badge bg-primary cost-badge"></span>
              <span th:if="${tire.tirePrice == null}" class="text-muted">--</span>
            </div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">装胎费用:</div>
            <div class="col-sm-8">
              <span th:if="${tire.installCost != null}"
                    th:text="'￥' + ${#numbers.formatDecimal(tire.installCost, 1, 2)}"
                    class="badge bg-info cost-badge"></span>
              <span th:if="${tire.installCost == null}" class="text-muted">--</span>
            </div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">修补费用:</div>
            <div class="col-sm-8">
              <span th:if="${tire.repairCost != null}"
                    th:text="'￥' + ${#numbers.formatDecimal(tire.repairCost, 1, 2)}"
                    class="badge bg-warning cost-badge"></span>
              <span th:if="${tire.repairCost == null}" class="text-muted">--</span>
            </div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">调胎费用:</div>
            <div class="col-sm-8">
              <span th:if="${tire.swapCost != null}"
                    th:text="'￥' + ${#numbers.formatDecimal(tire.swapCost, 1, 2)}"
                    class="badge bg-secondary cost-badge"></span>
              <span th:if="${tire.swapCost == null}" class="text-muted">--</span>
            </div>
          </div>
          <div class="row mb-2">
            <div class="col-sm-4 info-label">总费用:</div>
            <div class="col-sm-8">
              <!-- 修复总费用计算 -->
              <strong th:text="'￥' + ${#numbers.formatDecimal(
                (tire.tirePrice != null ? tire.tirePrice : 0) +
                (tire.installCost != null ? tire.installCost : 0) +
                (tire.repairCost != null ? tire.repairCost : 0) +
                (tire.swapCost != null ? tire.swapCost : 0), 1, 2)}"
                      class="text-success"></strong>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作面板 -->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">操作</h5>
        </div>
        <div class="card-body">
          <div class="d-grid gap-2">
            <a th:if="${tire.scrapDate == null}"
               th:href="@{/api/tires/{id}/repair(id=${tire.id})}"
               class="btn btn-warning">添加修补记录</a>

            <!-- 添加调胎费用按钮 -->
            <a th:if="${tire.scrapDate == null}"
               th:href="@{/api/tires/{id}/swap(id=${tire.id})}"
               class="btn btn-primary">添加调胎记录</a>

            <form th:if="${tire.scrapDate == null}"
                  th:action="@{/api/tires/{id}/scrap(id=${tire.id})}"
                  method="post" class="d-grid">
              <div class="input-group">
                <input type="number" class="form-control" name="scrapMileage"
                       placeholder="输入报废公里数" required min="0">
                <button type="submit" class="btn btn-danger">标记报废</button>
              </div>
            </form>

            <a th:href="@{/api/tires/usage?tireNumber={tireNumber}(tireNumber=${tire.tireNumber})}"
               class="btn btn-info">查询使用记录</a>
            <a href="/api/tires" class="btn btn-secondary">返回列表</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 普通轮胎照片展示区域 -->
  <div class="row photo-section" th:if="${generalPhotos != null and !generalPhotos.isEmpty()}">
    <div class="col-md-12">
      <div class="card photo-card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">普通照片</h5>
          <span class="badge bg-primary" th:text="${generalPhotos != null ? generalPhotos.size() : 0} + ' 张'"></span>
        </div>
        <div class="card-body">
          <div class="photo-container">
            <!-- 普通照片缩略图展示 -->
            <div th:each="photo, iter : ${generalPhotos}" class="photo-item"
                 th:attr="data-bs-toggle='modal', data-bs-target='#generalPhotoModal', onclick='openGeneralPhotoModal(${iter.index})'">
              <img th:src="@{/api/tires/{tireId}/photos/{photoId}(tireId=${tire.id}, photoId=${photo.id})}"
                   alt="轮胎照片" class="img-thumbnail"
                   onerror="this.src=''">
              <span class="photo-count-badge" th:text="${iter.index + 1}"></span>
              <span class="photo-type-badge">普通</span>
              <div class="photo-description" th:if="${photo.description != null}" th:text="${photo.description}"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 修补记录照片区域 -->
  <div class="row photo-section" th:if="${repairPhotos != null and !repairPhotos.isEmpty()}">
    <div class="col-md-12">
      <div class="card photo-card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">修补记录照片</h5>
          <span class="badge bg-warning" th:text="${repairPhotos != null ? repairPhotos.size() : 0} + ' 张'"></span>
        </div>
        <div class="card-body">
          <div class="photo-container">
            <!-- 修补记录照片缩略图展示 -->
            <div th:each="photo, iter : ${repairPhotos}" class="photo-item"
                 th:attr="data-bs-toggle='modal', data-bs-target='#repairPhotoModal', onclick='openRepairPhotoModal(${iter.index})'">
              <img th:src="@{/api/tires/{tireId}/photos/{photoId}(tireId=${tire.id}, photoId=${photo.id})}"
                   alt="修补记录照片" class="img-thumbnail"
                   onerror="this.src=''">
              <span class="photo-count-badge" th:text="${iter.index + 1}"></span>
              <span class="photo-type-badge" style="background: #ffc107;">修补</span>
              <div class="photo-description" th:if="${photo.description != null}" th:text="${photo.description}"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 调胎记录照片区域 -->
  <div class="row photo-section" th:if="${swapPhotos != null and !swapPhotos.isEmpty()}">
    <div class="col-md-12">
      <div class="card photo-card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">调胎记录照片</h5>
          <span class="badge bg-info" th:text="${swapPhotos != null ? swapPhotos.size() : 0} + ' 张'"></span>
        </div>
        <div class="card-body">
          <div class="photo-container">
            <!-- 调胎记录照片缩略图展示 -->
            <div th:each="photo, iter : ${swapPhotos}" class="photo-item"
                 th:attr="data-bs-toggle='modal', data-bs-target='#swapPhotoModal', onclick='openSwapPhotoModal(${iter.index})'">
              <img th:src="@{/api/tires/{tireId}/photos/{photoId}(tireId=${tire.id}, photoId=${photo.id})}"
                   alt="调胎记录照片" class="img-thumbnail"
                   onerror="this.src=''">
              <span class="photo-count-badge" th:text="${iter.index + 1}"></span>
              <span class="photo-type-badge" style="background: #0dcaf0;">调胎</span>
              <div class="photo-description" th:if="${photo.description != null}" th:text="${photo.description}"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 修补记录部分 -->
  <div class="row" th:if="${tire.repairRecords != null and !tire.repairRecords.isEmpty()}">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">修补记录</h5>
          <span class="badge bg-warning" th:text="${repairRecordCount} + ' 条记录'"></span>
        </div>
        <div class="card-body">
          <pre class="record-pre" th:text="${tire.repairRecords}"></pre>
        </div>
      </div>
    </div>
  </div>

  <!-- 调换记录部分 -->
  <div class="row" th:if="${tire.swapRecords != null and !tire.swapRecords.isEmpty()}">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">调换记录</h5>
          <span class="badge bg-info" th:text="${swapRecordCount} + ' 条记录'"></span>
        </div>
        <div class="card-body">
          <pre class="record-pre" th:text="${tire.swapRecords}"></pre>
        </div>
      </div>
    </div>
  </div>

  <!-- 普通照片模态框 -->
  <div class="modal fade photo-modal" id="generalPhotoModal" tabindex="-1" aria-labelledby="generalPhotoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="generalPhotoModalLabel">普通照片 - <span th:text="${tire.tireNumber}"></span></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="generalPhotoCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
              <div th:each="photo, iter : ${generalPhotos}"
                   th:classappend="${iter.index == 0} ? 'active' : ''"
                   class="carousel-item">
                <img th:src="@{/api/tires/{tireId}/photos/{photoId}(tireId=${tire.id}, photoId=${photo.id})}"
                     class="d-block w-100" alt="普通照片"
                     onerror="this.src=''">
                <div class="carousel-caption d-none d-md-block" th:if="${photo.description != null}">
                  <p th:text="${photo.description}"></p>
                </div>
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#generalPhotoCarousel" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">上一张</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#generalPhotoCarousel" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">下一张</span>
            </button>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 修补记录照片模态框 -->
  <div class="modal fade photo-modal" id="repairPhotoModal" tabindex="-1" aria-labelledby="repairPhotoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="repairPhotoModalLabel">修补记录照片 - <span th:text="${tire.tireNumber}"></span></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="repairPhotoCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
              <div th:each="photo, iter : ${repairPhotos}"
                   th:classappend="${iter.index == 0} ? 'active' : ''"
                   class="carousel-item">
                <img th:src="@{/api/tires/{tireId}/photos/{photoId}(tireId=${tire.id}, photoId=${photo.id})}"
                     class="d-block w-100" alt="修补记录照片"
                     onerror="this.src=''">
                <div class="carousel-caption d-none d-md-block" th:if="${photo.description != null}">
                  <p th:text="${photo.description}"></p>
                </div>
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#repairPhotoCarousel" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">上一张</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#repairPhotoCarousel" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">下一张</span>
            </button>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 调胎记录照片模态框 -->
  <div class="modal fade photo-modal" id="swapPhotoModal" tabindex="-1" aria-labelledby="swapPhotoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="swapPhotoModalLabel">调胎记录照片 - <span th:text="${tire.tireNumber}"></span></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="swapPhotoCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
              <div th:each="photo, iter : ${swapPhotos}"
                   th:classappend="${iter.index == 0} ? 'active' : ''"
                   class="carousel-item">
                <img th:src="@{/api/tires/{tireId}/photos/{photoId}(tireId=${tire.id}, photoId=${photo.id})}"
                     class="d-block w-100" alt="调胎记录照片"
                     onerror="this.src=''">
                <div class="carousel-caption d-none d-md-block" th:if="${photo.description != null}">
                  <p th:text="${photo.description}"></p>
                </div>
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#swapPhotoCarousel" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">上一张</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#swapPhotoCarousel" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">下一张</span>
            </button>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <footer class="bg-dark text-white mt-5 py-4">
    <div class="container text-center">
      <p class="mb-0">轮胎管理系统 &copy; 2025</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // 打开普通照片模态框
    function openGeneralPhotoModal(index) {
      const carousel = new bootstrap.Carousel(document.getElementById('generalPhotoCarousel'));
      carousel.to(index);
    }

    // 打开修补记录照片模态框
    function openRepairPhotoModal(index) {
      const carousel = new bootstrap.Carousel(document.getElementById('repairPhotoCarousel'));
      carousel.to(index);
    }

    // 打开调胎记录照片模态框
    function openSwapPhotoModal(index) {
      const carousel = new bootstrap.Carousel(document.getElementById('swapPhotoCarousel'));
      carousel.to(index);
    }
  </script>
</body>
</html>